<template>
  <div v-loading="loading">
    <!--博客为空-->
    <div v-if="total == 0" class="active blog_list">
      <img src="https://mp-blog.csdn.net/mp_blog/img/monkey-blank.137fa3ce.png" class="monkey_lank">
      <div class="blank_tips">空空如也</div>
        <el-button class="button_blog" @click="releaseBlog"><span>写博客</span></el-button>
    </div>
    <!--搜索栏-->
    <el-form v-else label-width="68px" :inline="true">
      <el-form-item label="标题" prop="title" style="float: left">
        <el-input v-model="queryParams.title" placeholder="请输入标题" clearable size="small"/>
      </el-form-item>
      <el-form-item label="分类" prop="typeId" style="float: left">
        <el-select v-model="queryParams.typeId" placeholder="请选择分类" clearable size="small">
          <el-option v-for="item in blogTypeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item style="float: left">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getBlogList">搜索</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="releaseBlog">发布博客</el-button>
      </el-form-item>
    </el-form>
    <!--文章列表-->
    <div class="describe" v-for="item in blogList">
      <el-card style="margin-top: 25px; border-radius: 20px">
        <h4 class="title-list"><a @click="viewBlogDetail(item.id)">{{item.title}}</a></h4>
        <p class="content-list" @click="viewBlogDetail(item.id)">{{item.content}}</p>
        <div style="float: right">
          <el-button size="mini" type="text" @click="editBlog(item.id)" style="margin-right: 15px">
            编辑
          </el-button>
          <el-button size="mini" type="text" @click="viewBlogDetail(item.id)" style="margin-right: 15px">
            详情
          </el-button>
          <el-button size="mini" type="text" @click="deleteBlog(item.id)" style="margin-right: 15px; color: red">
            删除
          </el-button>
          <b>发布于&nbsp;{{$moment(item.createTime).fromNow()}}</b>
        </div>
      </el-card>
    </div>
    <!--分页-->
    <el-pagination v-if="total > 1"
      @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="queryParams.pageNum" :page-sizes="[5,10,20,50]"
      :page-size="queryParams.pageSize" layout="total, sizes, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import {listBlog,deleteBlog} from "@/api/blog";
  import {getBlogTypeList} from "@/api/blogType";
  export default {
    data() {
      return {
        // 博客列表
        blogList: [],
        // 博客分类列表
        blogTypeList: [],
        loading: true,
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          author: JSON.parse(localStorage.getItem("loginName")),
          title: null,
          typeId: null,
        },
      }
    },
    created() {
      this.getBlogList()
      this.getBlogType()
    },
    methods: {
      // 博客分类
      getBlogType(){
        getBlogTypeList().then( res => {
          this.blogTypeList = res.data.data
        })
      },
      // 博客列表
      getBlogList() {
        this.loading = true
        listBlog(this.queryParams).then((response) =>{
          this.blogList = response.data.rows
          this.total = response.data.total
          this.loading = false
        })
      },
      //查看Blog详情
      viewBlogDetail(id) {
        this.$router.push({name: 'blogDetail', params: {id: id}})
      },
      // 修改blog
      editBlog(id){
        this.$router.push({path: "/creation/editor", query: {id: id}})
      },
      // 发布博客
      releaseBlog() {
        this.$router.push({path: "/creation/editor"})
      },
      // 删除博客
      deleteBlog(id) {
        this.$confirm('是否确认删除该博客?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteBlog(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getBlogList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.queryParams.pageSize =  size;
        this.getBlogList(); // 数据发生改变重新申请数据
      },
      handleCurrentChange: function(pageNum){
        this.queryParams.pageNum = pageNum;
        this.getBlogList(); // 数据发生改变重新申请数据
      },
    }
  }
</script>

<style scoped>
  .describe {
    width: 100%;
    height: 154px;
    border-radius: 20px;
  }
  .describe:hover {
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    border-color: #eee;
  }
  h4 {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .title-list {
    width: 100%;
    text-align: left;
    font-size: 18px;
    line-height: 24px;
    color: #222226;
  }
  a {
    color: #222226;
    cursor: pointer;
    text-decoration: none;
  }
  a:hover {
    color: #FC5531;
    text-decoration: none;
  }
  .content-list {
    margin-top: 16px;
    width: 100%;
    height: 65px;
    line-height: 22px;
    text-align: left;
    cursor: pointer;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
  }
  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }
  .el-form {
    height: 30px;
  }
  .el-form-item {
    margin-bottom: 0px;
  }
  .blog_list.active {
    padding: 95px;
  }
  .blog_list {
    text-align: center;
  }
  .blog_list .monkey_lank {
    display: block;
    width: 200px;
    height: 200px;
    margin: auto;
    border-style: none;
  }
  .blog_list div.blank_tips {
    margin-bottom: 4px;
    font-size: 16px;
    color: #999aaa;
    letter-spacing: 2px;
    text-align: center;
  }
  .button_blog {
    width: 300px;
    height: 40px;
    background: #fc5531;
    border-radius: 20px;
    font-size: 18px;
    color: #fff;
    line-height: 14px;
  }
</style>
